<template>
	<view class="news">
		<!-- 头部 -->
		<yHeader :current="5" :screenWidth="screenWidth" @Tabs="handleTabs" class="bg-white"></yHeader>
		<!-- pv端内容 -->
		<view v-if="SizeChange.width > 480" class="__inner mb-3 bg-white p-4" style="box-sizing: border-box">
			<view class="container">
				<el-button @click="back" style="position: absolute">返回</el-button>
				<view class="content flex">
					<view v-if="news.length!=0" class="left">
						<text class=" title">{{ news[Newsid].title }}</text>
						<view class="flex font-sm font-weight-bold justify-between w-100 py-2">
							<view class="">
								<text class="font-md">爬取时间:</text>
								<text>{{news[Newsid].Time}}</text>
							</view>
							<view @click="goOrangin(news[Newsid].Url)" class="hover">
								<text class="font-md hover">爬取源网站:</text>
								<text>{{news[Newsid].Url}}</text>
							</view>
						</view>
						<text v-html="news[Newsid].Main[0]" class="main"></text>
					</view>
					<view class="right flex-shrink">
						<view class="news-right">
							<view class="item">
								<view class="sTitle">企业销售top榜</view>
								<view class="nr">
									<view class="qyitem" v-for="(item, index) in companyNameList.slice(0, 5)"
										:key="index" @click="
                      handleTabs(
                        '/pages/detail/enterprise-detail?id=E00000000000001'
                      )
                    ">
										<image :src="Domain_Business + item.Enterprise_Logo" mode="scaleToFill" />
										<view>
											<view>{{ item.Enterprise_Name }}</view>
											<view>销售额: {{ item.Amount }}元</view>
										</view>
										<view></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<yFooter Show :screenWidth="screenWidth"></yFooter>
	</view>
</template>

<script>
	const app = getApp();
	import yHeader from "@/components/yHeader.vue";
	import yFooter from "@/components/yFooter.vue";
	import yTable from "@/components/yTable.vue";
	import {
		getEnterpriseSalesRanking
	} from "@/api/information.js";
	import {
		GetRedis
	} from '@/api/global.js'
	export default {
		components: {
			yHeader,
			yFooter,
			yTable,
		},
		data() {
			return {
				news: [],
				Newsid:'',
				screenWidth: uni.getSystemInfoSync().windowWidth,
				ThemeColors: app.globalData.ThemeColors,
				Domain_Business: app.globalData.Domain_Business,
				SizeChange: {
					height: "",
					width: "",
				},
				active: 0,
				from: {
					Primary_Key_Name: "News_SerialNumber",
					Primary_Key: 0,
					Data: "news_info",
				},
				newsList: {},
				companyNameList: [],
			};
		},
		onShow() {
			window.addEventListener("resize", this.getSize());
		},
		methods: {
			handleTabs(url) {
				uni.navigateTo({
					url,
				});
			},
			getSize() {
				this.SizeChange.width = window.screen.width;
			},
			back() {
				uni.navigateTo({
					url:'/pages/index/consult'
				})
			},
			async getData() {
				const res = await GetRedis({
					data: {
						Key: 'zjl_reptile'
					},
				})
				if(res.Status=='success'){
					this.news = res.Data
				}
			},
			async companyName() {
				const res = await getEnterpriseSalesRanking({
					data: {
						page: 1,
						limit: 5,
					},
				});
				this.companyNameList = res.Data;
			},
			goOrangin(url){
				window.location.href = url
			}
		},
		onLoad(options) {
			this.Newsid = options.id
			this.getData()
		},
		created() {
			this.companyName();
		},
	};
</script>

<style lang="scss" scoped>
	.news {
		background-color: #eaeaea;
	}

	.container {
		position: relative;
	}

	.sTitle {
		height: 34px;
		background-color: #fff;
		line-height: 30px;
		background-image: url();
		background-repeat: no-repeat;
		background-position: 0px 5px;
		background-size: 4px auto;
		position: relative;
		padding-left: 20rpx;
		border-bottom: 1px solid #dddddd;
		font-weight: bold;
		font-size: 45rpx;
	}

	.content {
		display: flex;

		.el-button {
			position: absolute;
		}

		.left {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			// border: 1px solid red;
			margin: 0 20rpx 0 0;
			padding: 0 40rpx;
			box-sizing: border-box;
			overflow-x: scroll;
			.title {
				font-size: 60rpx;
				display: inline-block;
				font-weight: bold;
				text-align: center;
				width: 80%;
				margin: 0 0 40rpx 0;
			}
		}

		.right {
			display: flex;
			width: 700rpx;
			position: relative;

			// height: 2480rpx;
			.news-right {
				width: 700rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				position: sticky;
				// background-color: yellow;
				z-index: 999;

				/* 根据需要设置合适的层级 */
				.item {
					font-size: 28rpx;

					.nr {
						padding: 10rpx 0 0 20rpx;

						.qyitem {
							margin: 0 0 15rpx 0;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							display: flex;
							align-items: center;
							border-bottom: 1px solid #dddddd;
							padding: 10rpx;
							box-sizing: border-box;

							image {
								width: 100rpx;
								height: 100rpx;
								margin: 0 10rpx 0 0;
							}
						}
					}
				}
			}
		}
	}
	.hover:hover{
		cursor: pointer;
		text-decoration: underline;
	}
</style>